<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>云南省疫情统计</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
    <link rel="stylesheet" href="../dist/css/layui.css">
    <link rel="stylesheet" href="../layui/css/modules/layer/default/layer.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">疫情可视化系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="../img/admin2.png" class="layui-nav-img">
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:window.location ='regist.html';">用户注册</a></dd>
                    <dd><a href="javascript:window.location ='login.html';">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:window.location = 'country.html';">全国疫情统计</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:window.location ='guizhou.html';">贵州省</a></dd>
                        <dd><a href="javascript:window.location ='yunnan.html';">云南省</a></dd>
                        <dd><a href="javascript:window.location ='xianggang.html';">香港</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item "><a href="javascript:window.location = 'admin.html';">管理员列表</a></li>
                <li class="layui-nav-item"><a href="javascript:window.location = 'patience.html'">患者信息管理</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
        <!--        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>-->
        <div id="main" style="width: 100%;height: 100%;"></div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        疫情可视化系统
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<script src="../dist/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script type="text/javascript">

    // //JS
    // layui.use(['element', 'layer', 'util'], function () {
    //     var element = layui.element
    //         , layer = layui.layer
    //         , util = layui.util
    //         , $ = layui.$;
    //
    //     //头部事件
    //     util.event('lay-header-event', {
    //         //左侧菜单事件
    //         menuLeft: function (othis) {
    //             layer.msg('展开左侧菜单的操作', {icon: 0});
    //         }
    //         , menuRight: function () {
    //             layer.open({
    //                 type: 1
    //                 , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
    //                 , area: ['260px', '100%']
    //                 , offset: 'rt' //右上角
    //                 , anim: 5
    //                 , shadeClose: true
    //             });
    //         }
    //     });
    //
    // });

    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据

    //指定图表的配置 和数据
    var option = {
        title: {
            text: '云南省疫情统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: '{b}<br/>{c} (p / km2)'
        },
        legend: {
            data: ['人数']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            data: ["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "丽江市", "普洱市", "临沧市", "安宁市", "宣威市", "水富市", "腾冲市", "芒市", "瑞丽市",
                "泸水市", "香格里拉市", "大理市"],
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },

        series: [{
            name: '人数',
            type: 'bar',
            showBackground: true,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 10, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: [33, 77, 16, 10, 12, 30, 20, 33, 25, 8, 32, 77, 62, 82, 45, 74, 15, 20]
        }]
    }
    myChart.setOption(option);

</script>
</body>
</html>
